<h1>引入图片</h1>
<!-- 引入静态图片，不需要写../，把图片放到assets中，然后只需写assets的位置 -->
<img src="assets/images/favicon.ico" alt="">
<!-- 引入动态外链图片，只需写[src]加定义的属性即可 -->
<img [src]='picUrl' alt="">

<ul>
    <li *ngFor="let item of list; let key = index">
        {{item.title}}---{{key}}
    </li>
</ul>

<h1>条件判断语句 *ngIf</h1>
<div *ngIf="flag">
    <img src="assets/images/favicon.ico" alt="">
</div>

<div *ngIf="!flag">
    <img [src]='picUrl' alt="">
</div>

<!-- 另一个条件判断语句 *ngSwitch -->
<div [ngSwitch]="orderStatus">
    <div *ngSwitchCase="1">已支付</div>
    <div *ngSwitchCase="2">支付且确认订单</div>
    <div *ngSwitchCase="3">已经发货</div>
    <div *ngSwitchDefault>无效订单</div>
</div>

<!-- 属性 ngClass -->
<div [ngClass]="{'red':true}">
    ngClass演示
</div>

<div [ngClass]="{'red':false,'blue':true}">
    ngClass演示1
</div>

<!-- ngClass 和 ngFor 结合使用-->
<ul>
    <li *ngFor="let item of list;let key =index" [ngClass]="{red: key===0,'blue':key===1}">
        {{item.title}}
    </li>
</ul>

<!-- ngStyle -->
<p [ngStyle]="{'color': attr}">
    ngStyle
</p>

<!-- 管道 -->
<p>
    {{today| date:'yyyy-MM-dd HH:mm:ss'}}
</p>

<!-- 事件 -->
<button (click)="run()">执行方法</button>
<p>
    {{today}}
</p>
<button (click)="setData()">
    改变属性
</button>

<!-- 表单事件，事件对象 -->
<input type="text" (keydown)="keyDown()">
<input type="text" (keyup)="keyUp($event)">

<!-- 双向数据绑定 -->

<input type="text" [(ngModel)]='keywords' />
{{keywords}}